import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image, SectionList } from 'react-native';
import { scaleSizeH, scaleSizeW, setSpText } from '../../util/ScreenUtil.js';
import FilmsMovieItem from './HotMovieItem';
import MovieService from '../../services/movie'
import FilmsHeader from "./filmsHeader"
import Seach from './Seach';
export default function filmsMoive(props) {
    // 声明一个新的叫做 “count” 的 state 变量
    const [movieData, setMovieData] = useState([]);
    const [pageData, setPageData] = useState({})
    const getData = async (result={ curPage:1, eachPage:5, status:"2" }) => {
        let data = await MovieService.GetMovies(result)
        if (!pageData.curPage) {
            setMovieData(data)
        // if (data[0].title==movieData[movieData.length-1].title) {
        //   let result=  data[0].data[0]
        //   movieData[movieData.length-1].data.push(result)
        // }else{
        //     setMovieData([...movieData,...data])
        // }
        }else{

            data =  data.filter(v=>{
                if (v.title==movieData[movieData.length-1].title) {
                    let result= v.data[0]
                    movieData[movieData.length-1].data.push(result)
                    
                }else{
                    return v.title!=movieData[movieData.length-1].title
                }                
            })
            setMovieData([...movieData,...data])
        }
        const {curPage,eachPage}=result
        setPageData({curPage,eachPage})
    }
    useEffect(() => {
        getData()
    }, []);
    function onEndReached() {
        getData({curPage:parseInt(pageData.curPage)+1,eachPage:5,status:"2"})
    }
    function handleformovie() {
        props.navigation.navigate("Moviedetails",{id:data._id})
        
    }
    return (
        <View >
            <View style={{ height: scaleSizeH(80), borderBottomColor: "#ededed", borderBottomWidth: 1, flexDirection: "row", alignItems: "center" }}>
                <View style={{ width: scaleSizeW(540), borderRightWidth: 1, height: scaleSizeH(50), borderRightColor: "#ededed", flexDirection: "row", alignItems: "center" }}>
                    <Text style={{ fontSize: setSpText(24), marginLeft: scaleSizeW(42), fontWeight: "bold" }}>全部</Text>
                    <Text style={{ fontSize: setSpText(24), marginLeft: scaleSizeW(42), color: "#cacaca" }}>10月</Text>
                    <Text style={{ fontSize: setSpText(24), marginLeft: scaleSizeW(42), color: "#cacaca" }}>11月</Text>
                    <Text style={{ fontSize: setSpText(24), marginLeft: scaleSizeW(42), color: "#cacaca" }}>12月</Text>
                </View>
                <View style={{ width: scaleSizeW(209), height: scaleSizeH(50), flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
                    <Text style={{ fontSize: setSpText(24), fontWeight: "bold" }}>时间</Text>
                    <Text style={{ fontSize: setSpText(24), marginLeft: scaleSizeW(42), color: "#cacaca" }}>热度</Text>
                </View>
            </View>
            <SectionList
                renderItem={({ item, index, section }) => <FilmsMovieItem navigation={props.screenProps} data={item} ></FilmsMovieItem>}
                renderSectionHeader={({ section: { title } }) => (
                    <FilmsHeader>{title}</FilmsHeader>
                )}
                onEndReached={onEndReached}
                sections={movieData}
                keyExtractor={(item, index) => item + index}
                onEndReachedThreshold={0.05}
            />
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});
filmsMoive.navigationOptions = () => {
    return {
        title: "即将上映",
    };
};